<link rel="stylesheet" type="text/css" href="src/css/view/deviceList.css">
<div class="layui-col-md9">
  <div class="layui-card">
    <div class="layui-card-body">
      <form class="layui-form" action="">
        <div class="layui-form-item">
          <div class="layui-input-inline">
            <select name="system" lay-verify="system" lay-filter="system">
              <option value="">系统</option>
            </select>  
          </div>   
          <div class="layui-input-inline">
            <select name="site" lay-verify="site" lay-filter="site">
              <option value="">地点</option>
            </select>  
          </div>
        </div>  
      </form>
    </div>
  </div>
</div>
<div class="layui-col-md3">
  <div class="layui-card">
    <div class="layui-card-body">
      <button class="layui-btn layui-btn-sm viewBtn2" view="stnAdd">添加</button>
      <button class="layui-btn layui-btn-sm layui-btn-normal" id="edit">修改</button>
      <button class="layui-btn layui-btn-sm layui-btn-danger" id="del">删除</button>
    </div>
  </div>
</div>
<div class="layui-col-md12">
  <div class="layui-card">
    <div id="a1"></div>
    <div class="layui-card-body">
      <table id="table1" lay-filter="table1"></table>
    </div>
  </div>
</div>

<div class="more">
  <div class="more-title">更多信息</div>
  <div class="more-close"><span class="layui-icon layui-icon-close"></span></div>
  <div class="more-wrap"></div>
</div>

<script>
var access_token = sessionStorage.access_token;
var userId = sessionStorage.userid;
var rowData;
var tableRef = false;
var moreShow = false;
var moreIndex;
var filterData = {'status':''};
$('.layui-input-search').val('');   //初始化搜索框

layui.use(['table','form'], function(){
  var table = layui.table;
  var form = layui.form;
  form.render();
  formShow();
  
  function formShow(){
    var systemId = $('select[name="system"]').val();
    var siteId = $('select[name="site"]').val();
    var keyword = Trim($('.layui-input-search').val());
    table1 = table.render({
      elem:'#table1',
      height: 528, //容器高度
      url: 'actionApi/Stn/list',
      where: {
        "userId":userId,
        "systemId":systemId,
        "siteId":siteId,
        "keyword":keyword,
        "filterStatus":filterData.status
      },
      headers:{"Authorization":"Basic "+access_token},
      even:true,
      height:'full-200',
      size:'sm',
      method: 'post',
      id:'table1',
      page: true, //是否开启分页
      toolbar:'#toolbarHtml',
      cols:  [[ //标题栏
        {type:'checkbox', fixed: 'left',width:30},
        {field: 'STN_NAME',title:'位置', fixed: 'left', event: 'stnMore',width:150, sort: true,align:'center',style:"text-align:center;font-size:12px;cursor: pointer;font-weight:700;"},
        {field: 'DETAIL', title: '描述', fixed: 'left', width:200, sort: true,align:'center',style:"text-align:left;font-size:12px;"},
        {field: 'STATUS', title: '状态', width:60, sort: true,align:'center',style:"text-align:center;font-size:12px;"},
        {field: 'REMARK', title: '备注', width:200, sort: true,align:'center',style:"text-align:left;font-size:12px;"},
        {field: 'SITE_NAME', title: '地点', width:150,align:'center', sort: true,style:"text-align:center;font-size:12px;"},
        {field: 'SYSTEM_NAME', title: '系统', width:150, align:'center', sort: true,style:"text-align:center;font-size:12px;"},
        {field: 'USER_ID', title: '编辑用户', width:90, sort: true,align:'center',style:"text-align:center;font-size:12px;"},
        {field: 'EDIT_DATE', title: '编辑日期', width:130,align:'center', sort: true,style:"text-align:center;font-size:12px;"},
      ]],
      done: function(res, curr, count){
        table1Data = res.data;
        
      }
    }); 
  }
  
  //搜索输入监听 - 重新加载表格
  var inputStat = 0;
  //搜索函数
  function inputSearch(){
    inputStat += 1;
    //延迟执行，防止快速输入时频繁刷新表格
    setTimeout(function(){
      inputStat -= 1;
      if(inputStat==0){
        //筛选表格
        formShow();
      }
    },500);
  }
  //监听搜索栏输入事件
  $('.layui-input-search').unbind();
  $('.layui-input-search').bind('input propertychange', function() {
    inputSearch();    //执行搜索函数
  });  
  
  //监听单元格事件
  table.on('tool(table1)', function(obj){
    var data = obj.data;
    if(obj.event === 'stnMore'){
      if(moreShow == true){ //如果更多显示已打开
        if(moreIndex == data.STN_ID){   //再次点击，关闭更多显示
          $('.layui-table').find('td').removeClass('row-selected');
          moreShow = false;
          moreIndex = '';
          $('.more').hide();
          //console.log('更多显示关闭');
        }else{
          $('.layui-table').find('td').removeClass('row-selected');
          $(this).addClass('row-selected');
          moreIndex = data.STN_ID;
          getMoreInfo(data.STN_ID);
          //console.log('更多显示更新为'+data.STN_ID);
        }
      }else{
        $('.layui-table').find('td').removeClass('row-selected');
        $(this).addClass('row-selected');
        moreShow = true;    //更多信息显示标记
        moreIndex = data.STN_ID;
        getMoreInfo(data.STN_ID);
        $('.more').slideLeftShow();
        //console.log('更多显示打开为'+data.STN_ID);
      }

    }
  });
  //更多信息关闭按钮事件
  $('.more .layui-icon-close').click(function(){
    $('.layui-table').find('td').removeClass('row-selected');
    moreIndex = '';
    moreShow = false;
    $('.more').hide();
  });
  
  //获取更多信息
  function getMoreInfo(stnId){
    $.ajax({
      url: 'actionApi/Stn/more',
      type:'post',
      data:{"stnId":stnId},
      headers:{"Authorization":"Basic "+access_token},
      beforesend:function(){
        $('.more-wrap').html('<div class="more-tishi">读取中...</div>');
      },
      success:function(res){
        if(Object.keys(res.data).length!=0){
          $('.more-wrap').html('');
          for(var key in res.data){
            $('.more-wrap').append('<div class="more-info">'+
              '<div class="more-key">'+key+'</div>'+
              '<div class="more-value">'+res.data[key]+'</div></div>');
          }
        }else{
          $('.more-wrap').html('<div class="more-tishi">无更多信息</div>');
        }
      }
    });
  }
  
  //初始化select
  $('select[name="site"]').attr('disabled','disabled');
  
  var selectData;
  //获取select选项
  $.ajax({
    url: 'actionApi/Stn/select',
    type:'post',
    data:{"userId":userId},
    headers:{"Authorization":"Basic "+access_token},
    success:function(res){
      selectData = res.data;
      var systemList = selectData.system;
      for(var key in systemList){
        $('select[name="system"]').append('<option value="'+key+'">'+systemList[key]+'</option>');
      }
      form.render('select');
    }
  });
  
  //系统select选择事件
  form.on('select(system)', function(data){
    $('select[name="site"]').attr('disabled','disabled');
    $('select[name="site"]').html('<option value="">地点</option>');
    var systemId = data.value;
    //如果系统里有地点，地点select增加选项并启用
    if(selectData.site[systemId]){
      $('select[name="site"]').removeAttr('disabled');
      $('select[name="site"]').html('<option value="">地点</option>');
      for(var key in selectData.site[systemId]){
        $('select[name="site"]').append('<option value="'+key+'">'+selectData.site[systemId][key]+'</option>');
      }
    }
    form.render('select');
  });
  
  form.on('select', function(data){
    var systemId = $('select[name="system"]').val();
    var siteId = $('select[name="site"]').val();
    formShow();
    
  });
  
  //删除按钮点击事件
  $('#del').click(function(){
    var checkStatus = table.checkStatus('table1'),
    data = checkStatus.data;
    if(data.length==0){
      layer.msg('请选择要删除的位置 | No Location Selected!');
    }else{
      var idArr = [],tishi = '';
      for(i=0;i<data.length;i++){
        tishi += data[i].STN_NAME + ' , ';
        idArr.push(data[i].STN_ID);
      }
      tishi = tishi.substring(0,tishi.length-2);
      layer.confirm(tishi, {
          btn: ['Yes', 'No'],
          time: 0,
          title:'确定删除? - Delete?',
        }, function(){
          ajax = $.ajax({
            url:"actionApi/Stn/del",
            async:true,
            type: 'post',
            dataType:'json',
            headers:{"Authorization":"Basic "+access_token},
            data: {
              "":JSON.stringify(idArr)
            },
            success:function(res){
              if(res.code==0){
                parent.layer.closeAll();
                parent.layer.msg('删除成功');
                
                formShow();
              }else{
                parent.layer.closeAll();
                parent.layer.msg('出现错误');
              }
            }
          });
        }
      
      );
    }
  });
  
  
  //编辑按钮点击事件
  $('#edit').click(function(){
    var checkStatus = table.checkStatus('table1'),
    data = checkStatus.data;
    if(data.length==0){
      layer.msg('请选择要编辑的位置 | No Location Selected!');
    }else{
      for(i=0;i<data.length;i++){
        rowData = data;
        //打开添加弹出层
        layer.open({
          type: 2,
          title: '位置编辑 - Edit Locations',
          shade: 0,
          area: ['1000px','465px'],
          content: 'src/view/second/stnEdit.html?id='+i,
          end:function(){
            if(tableRef==true){
              formShow();
              tableRef = false;
            }
          },
          zIndex: layer.zIndex,
          success: function(layero){
            layer.setTop(layero);
          } 
        }); 
      }

    }
  });
  
  //监听工具栏事件
  table.on('toolbar(table1)', function(obj){
    switch(obj.event){
      case 'filter':
        layer.open({
          type: 2,
          title:'筛选',
          area: ['308px', '220px'], //宽高
          content: 'src/view/second/stnFilter.html',
          end:function(){
            if(tableRef==true){
              formShow();
              tableRef = false;
            }
          },
        });
      break;
    };
  });
  
});

//二级按钮点击事件
$('.viewBtn2').click(function(){
  var view = $(this).attr('view');
  $('#view').load('src/view/second/'+view+'.html');
});



</script>

<script type="text/html" id="toolbarHtml">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-primary layui-btn-sm" id="filterStatus" lay-event="filter">状态：<span>全部</span></button>
  </div>
</script>